<template>
  <div class="bigbox">
    <div class="box">
      <!-- 顶部标题栏 -->
      <div class="top">
        <div class="top-w">事件列表</div>
      </div>
      <div class="content">
    
        <s></s>
        <I></I>
        <l></l>

      </div>
    </div>
  </div>
</template>


<script setup>

import s from './Selection-box.vue'
import I from './Input-box.vue'
import l from './list.vue'




























// import { ref, onMounted, watchEffect, computed, onBeforeMount } from 'vue'
// import emitter from './utils/index'
// import db from './db'
// import { EnvironmentOutlined } from '@ant-design/icons-vue';

// onMounted(() => {
//   init()
// })


// // 对应的文字
// const obj={
//   1:"一级",
//   2:"二级",
//   3:"三级",
// }
// // 对应的颜色
// const bgcolor={
//   1:"red",
//   2:"orange",
//   3:"skyblue",
// }

// // 列表数组  里面有待处理 处理中 已解决三种状态
// const list=ref([
//   {
//     title:'待处理',
//     color:'red',
//     state:'pending',
//     bgcolor:'#1f232c'
//   },
//   {
//     title:'处理中',
//     color:'orange',
//     state:'processing',
//     bgcolor:'#1f232c'
//   },
//   {
//     title:'已解决',
//     color:'blue',
//     state:'resolved',
//     bgcolor:'#1f232c'
//   }
// ])

// // 初始化函数  计算数量  设置对应级别的颜色和文字
// const init=()=>{
//   list.value.forEach(num => {
//     num.num=db.filter(item=>item.state===num.state).length
//   }),
//   db.forEach(item => {
//     item.text=obj[item.level]
//     item.bgcolor=bgcolor[item.level]
//   })
// }


// // 当前选中项的下标 默认为0
// let currentIndex=ref(0)
// // 改变状态和下标
// const change=(state, index)=>{
//   currentIndex.value=index
//   emitter.emit('changeType',state)
// }


</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.bigbox{
  width: 350px;
  height: 920px;
  background-color: #303b4d;
  .box{
  width: 350px;
  height: 920px;
  background-color: rgba(0, 0, 0, .2);
  .top{
  width: 340px;
  height: 40px;
  background-color: rgba(0, 0, 0, .6);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  }
  .top-w{
  display: inline-block;
  height: 18px;
  border-left: 2px solid rgba(6, 228, 255, 1);
  line-height: 18px;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  margin-left: 15px;
  padding-left: 6px;
  }
  .content{
  width: 340px;
  height: 860px;
  padding: 15px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .5);
  }
  }
}
</style>